import React, { useEffect, useState } from "react";
import "./EventModal.css";
import axios from "axios";

const EventModal = ({ onClose, onSave }) => {
  const [eventData, setEventData] = useState({
    id: new Date().getTime(),
    title: "",
    startDate: "",
    endDate: "",
    eventType: "公司活动",
    priority: "中",
    description: "",
    isImportant: false,
  });

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setEventData((prev) => ({
      ...prev,
      [name]: value,
    }));
  };

  const handleSubmit = async () => {
    try {
      // 发送数据到服务端
      const response = await axios.post(
        "http://192.168.0.154:3000/my/eventclick",
        eventData
      );
      console.log("事件已保存：", response.data);

      // 如果保存成功，调用父组件的回调
      onSave(response.data);
      onClose();
    } catch (error) {
      console.error("保存事件失败：", error);
      // 这里可以添加错误提示
      alert("保存失败，请重试");
    }
  };

  return (
    <div className="modal-overlay">
      <div className="modal-content">
        <div className="modal-header">
          <h3>添加事件</h3>
          <button className="close-button" onClick={onClose}>
            ×
          </button>
        </div>

        <div className="modal-body">
          <div className="form-group">
            <label>事件名称</label>
            <input
              type="text"
              name="title"
              value={eventData.title}
              onChange={handleInputChange}
              placeholder="王小明的生日"
            />
          </div>

          <div className="form-group">
            <label>开始日期</label>
            <input
              type="date"
              name="startDate"
              value={eventData.startDate}
              onChange={handleInputChange}
              placeholder="请选择开始时期"
            />
          </div>

          <div className="form-group">
            <label>结束日期</label>
            <input
              type="date"
              name="endDate"
              value={eventData.endDate}
              onChange={handleInputChange}
              placeholder="请选择结束日期"
            />
          </div>

          <div className="form-group">
            <label>事件类别</label>
            <select
              name="eventType"
              value={eventData.eventType}
              onChange={handleInputChange}
            >
              <option value="公司活动">公司活动</option>
              <option value="个人事务">个人事务</option>
              <option value="会议">会议</option>
            </select>
          </div>

          <div className="form-group">
            <label>优先等级</label>
            <select
              name="priority"
              value={eventData.priority}
              onChange={handleInputChange}
            >
              <option value="高">高</option>
              <option value="中">中</option>
              <option value="低">低</option>
            </select>
          </div>

          <div className="form-group">
            <label>事件描述</label>
            <textarea
              name="description"
              value={eventData.description}
              onChange={handleInputChange}
              placeholder="补充性的一些描述"
            />
          </div>

          <div className="form-group">
            <label>
              <input
                type="checkbox"
                name="isImportant"
                checked={eventData.isImportant}
                onChange={(e) =>
                  setEventData((prev) => ({
                    ...prev,
                    isImportant: e.target.checked,
                  }))
                }
              />
              重要设置
            </label>
          </div>
        </div>

        <div className="modal-footer">
          <button className="save-button" onClick={handleSubmit}>
            保存事件
          </button>
        </div>
      </div>
    </div>
  );
};

export default EventModal;
